<template>
  <div class="scroll-box" >
    <el-tabs v-model="common.emailListPendingTab.current" type="border-card"
             @tab-remove="removeTab">
      <el-tab-pane
        v-for="(item, index) in common.emailListPendingTab.list"
        :key="index"
        :name="item.id"
        :closable="item.close">
        <span slot="label" :title="item.title"><i class="el-icon-alarm-clock" v-show="item.state== 0"></i> {{filterLen(item.title)}}</span>
        <!--        收件箱列表-->
        <PendingEmailList v-if="item.state== 0" :key="item.id" name="emailListPendingTab"></PendingEmailList>
        <!--        邮件详情 包含往来邮件-->
        <div v-else-if="item.state== 1" :style="{height:commonHeight}">
          <PendingMailDetail :id="item.id" :key="item.id" name="emailListPendingTab"></PendingMailDetail>
        </div>
        <!--        写信回复-->
        <div v-else-if="item.state== 2" :style="{height:commonHeight,overflowY:'auto'}">
          <WriteInbox :file="item.file"
                      :info="item.info" :key="item.id" :id="item.id" name="emailListPendingTab"></WriteInbox>
        </div>
        <!--        邮件详情- 不包含往来邮件-->
        <div v-else-if="item.state== 3" :style="{height:commonHeight}">
          <EmailDetail :id="item.id" :key="item.id" name="emailListPendingTab"></EmailDetail>
        </div>
        <!--        来往邮件列表-->
        <div v-else-if="item.state== 4" :style="{height:commonHeight}">
          <RelationEmailList :id="item.id" :key="item.id"  name="emailListPendingTab"></RelationEmailList>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
    import PendingMailDetail from "@/views/mail/detail/pendingDetail";
    import EmailDetail from "@/views/mail/detail/emailDetail";
    import PendingEmailList from "@/views/mail/pending/index";
    import WriteInbox from "@/views/mail/write/inboxIndex";
    import RelationEmailList from "@/components/mail/relation/EmailList";
    import {mapState} from 'vuex'

    export default {
        name: "mail",
        components: {PendingMailDetail, WriteInbox, EmailDetail, PendingEmailList,RelationEmailList},
        computed: {
            ...mapState(['common'])
        },
        data(){
            return {
                commonHeight:this.$height-131+'px'
            }
        },
        methods: {
            filterLen(title) {
                if (title.length > 15) {
                    return title.substring(0, 15) + "..."
                }
                return title;
            },
            removeTab(tab) {
                let list = this.common.emailListPendingTab.list, arr = [], index;
                for (let i in list) {
                    const item = list[i];
                    if (item.id != tab) {
                        arr.push(item)
                    } else {
                        index = i;
                    }
                }
                this.$store.commit('SET_EMAILLISTPENDINGTAB', {
                    type: 2, list: arr, index: index
                })
            },
        }
    }
</script>
<style>
</style>
<style scoped lang="scss">
  .scroll-box {
    overflow: hidden;
  }
</style>
